<%@ page language="java" import="java.util.*,java.text.SimpleDateFormat,cn.bupt.adt.constant.Constants" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page  isELIgnored="false"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String ip = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/";
%>
<%
	//分页
	//currentPage就是当前页，allPages表示的就是一共有多少页。这些在后面都会用到  
	int currentPage = 0, allPages = 0;
	if (request.getAttribute("currentPage") != null) {
		currentPage = Integer.parseInt(request.getAttribute(
				"currentPage").toString());
	}
	if (request.getAttribute("allPages") != null) {
		allPages = Integer.parseInt(request.getAttribute("allPages")
				.toString());
	}
	//本页面url，翻页用
	String url = "financeManagement/index";
	request.setAttribute("url", url);
	SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
	String startTime = sdf.format(request.getAttribute("startTime"));
	String endTime = sdf.format(request.getAttribute("endTime"));
	request.setAttribute("startTime", startTime);
	request.setAttribute("endTime", endTime);
%>
<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title></title>
    

	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css" />

    <link href="<%=request.getContextPath()%>/assets/css/font-awesome.css" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="css/Orderfont.css"><link>
	<script src="<%=request.getContextPath()%>/assets/js/jquery-1.10.2.js" type="text/javascript"></script>
	<script  type="text/javascript" src="js/layer/layer.js" ></script>
	<script src="assets/js/bootstrap.js"></script>
	<link rel="stylesheet" href="layerui/css/layui.css"><link>
	<script type="text/javascript" src="layerui/layui.js"></script>
	  </head>


  <body>
		  <div class="page-header">
		  		<h1><small>流水单<i class="icon-double-angle-right"></i></small></h1>
			</div>
  	<div class="container">
  	<form action="financeManagement/index/1" method="post" id="form">
	  	<div class="layui-form-pane" style="margin-top: 15px;">
			  <div class="layui-form-item">
			    <label class="layui-form-label">搜索</label>
			    <div class="layui-input-inline">
			      <input class="layui-input" placeholder="${name }" name="name">
			    </div>
			    <div class="layui-input-inline">
			      <a class="layui-btn" href="financeManagement/exportExcel?startTime=${startTime }&endTime=${endTime }&name=${name}">导出excel</a>
			    </div>			    
			  </div>	  	
			  <div class="layui-form-item">
			    <label class="layui-form-label">范围选择</label>
			    <div class="layui-input-inline">
			      <input class="layui-input" placeholder="${startTime }" id="LAY_demorange_s">
			    </div>
			    <div class="layui-input-inline">
			      <input class="layui-input" placeholder="${endTime }" id="LAY_demorange_e">
			    </div>
			    <div class="layui-input-inline">
			      <button class="layui-btn"  id="sub" >提交</button>
			    </div>			    
			  </div>
		</div>
	</form>
	<div class="table-responsive">
		<table class="table table-striped table-hover ">
			<thead >
				<tr class="center">
					<th>订单号</th>
					<th>类型</th>
					<th>日期</th>
					<th>金额</th>
					<th>余额</th>
					<th>名称</th>
				</tr>
			</thead>
			<tbody >
			<c:forEach items="${finances}" var="item">

							
				<tr class="center">
					<td>${item.id}</td>
					<td>
						<c:choose>
							<c:when test="${item.flag == 1}">
								收入
							</c:when>
							<c:otherwise>支出</c:otherwise>
						</c:choose>
					
					</td>
					<td><fmt:formatDate value="${item.time}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
					<td>${item.money}</td>
					<td>${item.remains}</td>
					<td>${item.name}</td>
				</tr>			
			</c:forEach>

			</tbody>
			<tfoot>
				<tr>
					<td colspan="10" style="text-align:left">
			     	<c:if test="${allPages>1}">
			     	<ul class="pagination">
			     		<li ><a 
						<c:choose> 
			     			<c:when test="${! empty name}">
			     				href="${url}/1?startTime=${startTime}&endTime=${endTime}&name=${name }"
			     			</c:when>
			     			<c:otherwise>href="${url}/1?startTime=${startTime}&endTime=${endTime}"</c:otherwise>
			     		</c:choose>			     		
			     		>首页</a></li>
			     		<li><a href="javascript:void(0)" id="previous" 
			     		<c:choose> 
			     			<c:when test="${!empty name}">
			     				onclick="dividePage('${url}','previous','${startTime }','${endTime }','${name }')"
			     			</c:when>
			     			<c:otherwise>onclick="dividePage('${url}','previous','${startTime }','${endTime }')"</c:otherwise>
			     		</c:choose>			     		
			     		>&laquo;</a></li>
			     		<c:forEach var="item" begin="1" end="${allPages }" varStatus="idx">
						  	<c:choose>
						  		<c:when test="${idx.index == currentPage }">
						  			<li class="active"><a href="javascript:void(0)" id="active">${idx.index}</a></li>
						  		</c:when>
						  		<c:otherwise>
						  			<li><a 
						     		<c:choose> 
						     			<c:when test="${! empty name}">
						     				href="${url}/${idx.index}?startTime=${startTime}&endTime=${endTime}&name=${name}"
						     			</c:when>
						     			<c:otherwise>href="${url}/${idx.index}?startTime=${startTime}&endTime=${endTime}"</c:otherwise>
						     		</c:choose>						  			
						  			>${idx.index}</a></li>
						  		</c:otherwise>
						  	</c:choose>
						  </c:forEach>
					      <li><a href="javascript:void(0)" id="next" 
				     		<c:choose> 
				     			<c:when test="${!empty name}">
				     				onclick="dividePage('${url}','next','${startTime }','${endTime }','${name }')"
				     			</c:when>
				     			<c:otherwise>onclick="dividePage('${url}','next','${startTime }','${endTime }')"</c:otherwise>
				     		</c:choose>					      
					      	   >&raquo;</a></li>
			     			<li><a 
								<c:choose> 
					     			<c:when test="${! empty name}">
					     				href="${url}/${allPages}?startTime=${startTime}&endTime=${endTime}&name=${name }"
					     			</c:when>
					     			<c:otherwise>href="${url}/${allPages}?startTime=${startTime}&endTime=${endTime}"</c:otherwise>
					     		</c:choose>				     			
			     			>尾页</a></li>
					</ul>			     	
			     	</c:if>
			     	
					
					</td>
				</tr>
			</tfoot>
		</table>
   	      	
	</div>
	</div>
	<script type="text/javascript" src="js/finance/dividePage.js"></script>
	<script type="text/javascript" src="js/finance/submitForm.js"></script>

	<script type="text/javascript">
		submitFormByButton("sub","form","financeManagement/index/1");
	</script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  var start = {
    min: '1970-01-01 23:59:59'
    ,max: '2099-06-16 23:59:59'
    ,istoday: false
    ,choose: function(datas){
      end.min = datas; //开始日选好后，重置结束日的最小日期
      end.start = datas //将结束日的初始值设定为开始日
    }
  };
  
  var end = {
    min: laydate.now()
    ,max: '2099-06-16 23:59:59'
    ,istoday: false
    ,choose: function(datas){
      start.max = datas; //结束日选好后，重置开始日的最大日期
    }
  };
  
  document.getElementById('LAY_demorange_s').onclick = function(){
    start.elem = this;
    laydate(start);
/*     alert($("#start").val()); 
	console.log("starttime:"+$("#LAY_demorange_s").val());*/
  }
  document.getElementById('LAY_demorange_e').onclick = function(){
    end.elem = this
    laydate(end);
/*     alert($("#end").val());
	console.log("endtime:"+$("#LAY_demorange_e").val()); */
  }
  
});
</script>	
	
  </body>
</html>